import echarts from 'echarts'
import '../../../public/static/theme/chalk'

// 初始化图表
export const setEchartOptions = (ref, options) => {
  echarts.init(ref, 'chalk').setOption(options)
}

export const setEcharts = (ref, yAxisData = {}, seriesData = {}) => {
  setEchartOptions(ref, {
    title: {
      show: true,
      text: '▍商家销售量统计',
      textStyle: {
        color: 'white',
        fontSize: 30,
        fontWeight: 500
      },
      top: '10%',
      left: '8%'
    },
    grid: {
      top: '20%',
      left: '10%',
      bottom: '15%'
    },
    tooltip: {
      show: true,
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: (arg) => {
        return arg.name + '<br>: ' + arg.value
      }
    },
    yAxis: {
      type: 'category',
      data: yAxisData
    },
    xAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'bar',
        data: seriesData,
        showBackground: true, // 设置背景时 必须将该值置为true
        backgroundStyle: {
          // 柱子后面的北京样式设置
          color: 'rgba(180, 180, 180, 0.2)'
        },
        barWidth: 66,
        itemStyle: {
          // 柱子的样式
          barBorderRadius: [0, 50, 50, 0],
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#3949ab' // 0%处的颜色
              },
              {
                offset: 1,
                color: '#4fc3f7' // 100%处的颜色
              }
            ],
            globalCoord: false // 缺省值为false
          }
        },
        label: {
          // 柱状图的文字显示样式等等
          show: true,
          textStyle: {
            color: 'white'
          },
          // color: 'white',
          rotate: 0,
          position: 'right'
        }
      }
    ]
  })
}

// export const resizeCharts = (ref) => {
//   ref.resize()
// }
